import { registerLiquidChart } from '@visactor/vchart';
import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc } from '../Utils'

const defaultData = [
    { valueField: 0.75 },
]

const array = [

]

const TempChartsA10 = ({ mode, config, apiData }) => {
    const chartRef = useRef()
    registerLiquidChart()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Spec, setSpec] = useState()

    const setSpecFunc = (data) => {
        const { type, background, padding, outlinePadding, maskShape, color, liquid, liquidBackground, ...item } = config || AdminRouter.Chart10
        const title = ChartsConfig.setTitle(item)
        const indicator = ChartsConfig.setIndicator(item, data || defaultData)

        setSpec({
            indicatorSmartInvert: true,
            type,
            data: { values: data || defaultData },
            valueField: 'valueField',
            color: [color],
            indicator,
            outlinePadding,
            maskShape,
            background,
            padding,
            title,
            liquid: { style: { fill: { gradient: 'linear', x0: 0, y0: 0, x1: 0, y1: 1, stops: liquid } } },
            liquidBackground: { style: { fillOpacity: 1, fill: liquidBackground } },
            tooltip: { visible: false }
        })
    }

    useEffect(() => {
        if (mode) {
            const { api, apiName, apiMethod, apiUrl, apiParams, level } = mode
            if (api) {
                const data = apiData.find(v => v.name === apiName)
                const levels = level?.split(',')
                const DATA = level ? data?.data[levels.join('.')] : data?.data
                if (DATA && config.field.length !== 0) {
                    const arr = DATA.flatMap(item => {
                        return config.field.map(key => ({
                            uuid: item.uuid,
                            color: key.color,
                            seriesField: key.title,
                            xField: item[key.group],
                            yField: item[key.field],
                        }))
                    })
                    setSpecFunc(arr)
                } else setSpecFunc()
            } else setSpecFunc()
        } else setSpecFunc()
    }, [mode, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />

};

export default TempChartsA10